<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习表单</title>
    <!--导入外部样式表-->
    <link href="../css/index.css" rel="stylesheet" type="text/css"/>

    <style>

        /*
        css   cascade style sheet  层叠样式表
        用来修饰页面样式
        1.内联样式表
            在html元素添加
            style="属性1:值1;属性2:值2; ....."
        2.局部样式表

        3.外部样式表


        选择器：
            元素选择器：html元素
            类选择器：class=""
            id选择器：id=""
            子类选择器
            后代选择器
            属性选择器
            伪类选择器
            通用选择器
        */
        *{
            font-size: 10px;
        }
        /*元素选择器*/
        body{
            background-color: #c3cdd7;
            background-image: url("../imgs/tao.png");
        }

        table{
            position: relative;
            left: 500px;
            top: 200px;
            background-color: aliceblue;
            width: 400px;
            height: 600px;
            border-radius: 10px;
            border: 1px black;
        }
        /*伪类选择器*/
        .first{
            background-color: pink;

        }
        h3{
            position: relative;
            top: -100px;
            font-size: 18px;
        }
        span{
            position: relative;
            top: -100px;
        }
        input[type="text"]{
            position: relative;
            top: -80px;
            width: 250px;
            height: 40px;
            border-radius: 10px;
            border-color: #b8e341;
        }
        input[type="password"]{
            position: relative;
            top: -70px;
            width: 250px;
            height: 40px;
            border-radius: 10px;
            border-color: #b8e341;
        }
        input[type="submit"]{
            position: relative;
            top: -70px;
            width: 250px;
            height: 40px;
            border-radius: 10px;
            border-color: transparent;
            background-color: #1078f6;
        }
        table>tr>td>span>a{
            color: #1078f6;
        }
        a{
            text-decoration-line: none;
            color: black;
        }
        a:hover{
            text-decoration-line: underline;
            color: #1078f6;
        }



    </style>
</head>
<body>
    <div>
        <ul>
            <li></li>
            <li></li>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>VUE</li>
            <li>Element</li>
            <li>BootStrap</li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <table  cellspacing="0px" align="center">
        <tr class="first" align="center" >
            <td id="one" colspan="2" >
               <a href=""> 微信登录</a>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href=""> QQ登录</a>
            </td>

        </tr>

        <tr >
            <td align="center">
                <h3>密码登录</h3>
                <span>推荐使用<a  style="color: #1078f6;" href="">快捷代码</a>,防止盗号</span>
                <h3></h3>
                <form method="post">
                    <input  type="text" name="username" placeholder="   支持QQ号 / 邮箱 / 手机号">
                    <br>
                    <input type="password" name="password" placeholder="  请输入密码">
                    <h3></h3>
                    <input type="submit" value="登录" >
                    <h3></h3>
                    <input type="checkbox" name="r1" value="1" checked disabled>使用您的QQ头像、昵称信息
                    <br>
                    <input type="checkbox" name="r2" value="2" >您的qq好友
                </form>
            </td>
        </tr>
    </table>

</body>
</html>
